<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>{{name}}</h3>
    <h3>{{age}}</h3>
    <button @click="addAge">addAge</button>
    <button @click="changeName">changeName</button>
    <h5>{{parentMsg.msg}}</h5>
    <ChildOne/>
    <ChildTwo/>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, onMounted, effect, watch } from 'vue'
import ChildOne from './ChildOne.vue'
import ChildTwo from './ChildTwo.vue'
export default defineComponent ({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components:{
    ChildOne,
    ChildTwo
  },
  data(){
    return {
      parentMsg: reactive({
        msg: 0
      })
    }
  },
  provide(){
    return {
      parentMsg: toRefs(this.parentMsg),
      onChangeMsg:()=>{
        this.parentMsg.msg =Math.random()
        console.log('onChangeMsg method',this.parentMsg.msg)
      }
    }
  },
  setup() {
    const state = reactive({
      name: 'hello vue3 !!!',
    })
    const age = ref(20)
    onMounted(()=>{
      console.log(state.name)
      console.log(age.value)
    })
    const methods = {
      addAge(){
        this.age++
      },
      changeName(){
        this.name = 'hello vue3 !!!' + Math.random().toString().substr(4)
      }
    }
    effect(()=>{
      console.log('effect==',age.value)
      console.log('effect==',state.name)
    })
    watch(age,(value)=>{
      alert(value)
    })
    return {
      ...toRefs(state),
      age,
      ...methods
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
